<template>
  <t-dialog v-model:visible="dialogVisible" header="任务详细" width="700px">
    <t-descriptions :column="1" bordered>
      <t-descriptions-item label="任务编号">
        {{ detailData.id }}
      </t-descriptions-item>
      <t-descriptions-item label="任务名称">
        {{ detailData.name }}
      </t-descriptions-item>
      <t-descriptions-item label="任务状态">
        <t-tag variant="light" :theme="getTimelineDotColor(detailData.status)">{{
          dictionaryStore.analysis('infra_job_status', detailData.status)
        }}</t-tag>
      </t-descriptions-item>
      <t-descriptions-item label="处理器的名字">
        {{ detailData.handlerName }}
      </t-descriptions-item>
      <t-descriptions-item label="处理器的参数">
        {{ detailData.handlerParam }}
      </t-descriptions-item>
      <t-descriptions-item label="Cron 表达式">
        {{ detailData.cronExpression }}
      </t-descriptions-item>
      <t-descriptions-item label="重试次数">
        {{ detailData.retryCount }}
      </t-descriptions-item>
      <t-descriptions-item label="重试间隔">
        {{ detailData.retryInterval + ' 毫秒' }}
      </t-descriptions-item>
      <t-descriptions-item label="监控超时时间">
        {{ detailData.monitorTimeout > 0 ? detailData.monitorTimeout + ' 毫秒' : '未开启' }}
      </t-descriptions-item>
      <t-descriptions-item label="后续执行时间">
        <t-timeline>
          <t-timeline-item v-for="(nextTime, index) in nextTimes" :key="index"
            :label="dayjs(nextTime).format('YYYY-MM-DD HH:mm:ss')">
            第 {{ index + 1 }} 次
          </t-timeline-item>
        </t-timeline>
      </t-descriptions-item>
    </t-descriptions>
    <template #footer>
      <t-button theme="default" @click="dialogVisible = false">取消</t-button>
    </template>
  </t-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Dialog as TDialog, Descriptions as TDescriptions, DescriptionsItem as TDescriptionsItem, Timeline as TTimeline, TimelineItem as TTimelineItem } from 'tdesign-vue-next';

import { getJobNextTimes, infraJobCRUD, JobVO } from '@/api/system/job';

defineOptions({ name: 'InfraJobDetail' });
import { useDictionaryStore } from '@/store';
import dayjs from 'dayjs';

// 字典仓库
const dictionaryStore = useDictionaryStore();
const dialogVisible = ref(false); // 弹窗的是否展示
const detailLoading = ref(false); // 表单的加载中
const detailData = ref({} as JobVO); // 详情数据
const nextTimes = ref([]); // 下一轮执行时间的数组
const getTimelineDotColor = (result: number) => {
  const map = [
    'primary', 'success', 'danger'
  ]
  return result in map ? map[result] : 'default'
}
/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true;
  // 查看，设置数据
  if (id) {
    detailLoading.value = true;
    try {
      detailData.value = await infraJobCRUD.get({ id });
      // 获取下一次执行时间
      nextTimes.value = await getJobNextTimes({ id });
    } finally {
      detailLoading.value = false;
    }
  }
};

defineExpose({ open }); // 提供 open 方法，用于打开弹窗
</script>
<style scoped>
:deep(.t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__wrapper) {
  margin-left: 0;
}

:deep(.t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__label) {
  top: 33px;
  left: 33px;
}
</style>